<template>
    <div>
        <div class="day_picker">
            <div class="date flex">
                <p v-for="(i, idx) in timeTabs" 
                    @click="chooseTimeTab(i.value)"
                    :key="idx" 
                    :class="{active: i.value === actTimeTab}">{{i.label}}</p>
            </div>
        </div>
        <div class="num_box">
            <div class="item" @click="actNum = '1'">
                <image src="/static/images/icon-share.webp" mode="" />
                <span>分享次数</span>
                <p>{{shareCnts.shareCriCnt + shareCnts.shareFriendCnt}}</p>
            </div>
            <div class="item" @click="actNum = '2'">
                <image src="/static/images/icon-num.webp" mode="" />
                <span>看我次数</span>
                <p>{{viewCnts.viewCriCnt + viewCnts.viewFriendCnt}}</p>
            </div>
            <div class="item" @click="actNum = '3'">
                <image src="/static/images/icon-person.webp" mode="" />
                <span>看我人数</span>
                <p>{{viewNums.viewCriCnt + viewNums.viewFriendCnt}}</p>
            </div>
        </div>
        <div class="detail">
            <div class="detail_box flex">
                <div v-if="actNum == '1'" class="triangle triangle_1"></div>
                <div v-if="actNum == '2'" class="triangle triangle_2"></div>
                <div v-if="actNum == '3'" class="triangle triangle_3"></div>
                <div class="flex-1 flex-column flex-center">
                    <span>聊天/群聊</span>
                    <p>{{chatNum}}</p>
                </div>
                <div class="flex-1 flex-column flex-center">
                    <span>朋友圈</span>
                    <p>{{timelineNum}}</p>
                </div>
            </div>
        </div>
        <div class="share_list">
            <div class="title flex-v-center" v-if="!userId">
                <p class="flex-1"> 当日分享 </p>
                <div @click="QandA" class="flex-v-center fw-normal fs28" style="color: #004999">
                    <i class="mar-r10 icon-question-circular"></i>
                    说明
                </div>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in list" :key="index">
                    <div class="top">
                        <div class="art_title">{{item.title}}</div>
                        <div class="img">
                            <image :src="item.pictureUrl" mode="aspectFill"></image>
                        </div>
                    </div>
                    <div class="bottom">
                        <p>查看人数：{{item.viewShareNum}}</p>
                        <p>查看次数：{{item.userShareViewCnt}}</p>
                        <span @click="$navigate.to(`/pages/user/whoSeeMe?dynamicId=${item.id}&userId=${userId || ''}&teamId=${teamId || ''}`)">谁看了 <i class="icon-arrow-right"></i> </span>
                    </div>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>
        <uni-popup ref="qandAPopup" type="bottom">
            <div class="q_and_a">
                <div class="title">常见问题说明</div>
                <div class="qa_list">
                    <div class="qa_item" v-for="(item, index) in qaList" :key="index">
                        <span>问</span>
                        <div class="ask">{{item.ask}}</div>
                        <div class="answer">{{item.answer}}</div>
                    </div>
                </div>
            </div>
        </uni-popup>

        <pub-fast-date-picker v-show="false" ref="fastDatePicker"></pub-fast-date-picker>
    </div>
</template>

<script>
import articleItem from '@/components/pages/article-item.vue'
import { getViewerDynamicHis, getShareViewerTotal } from '@/request/user'
export default {
    components: {
        articleItem
    },
    data() {
        return {
            userId: '',
            teamId: '',
            actTimeTab: '00',
            timeTabs: [
                {label: '今日', value: '00'},
                {label: '昨日', value: '01'},
                {label: '上周', value: '03'},
                {label: '近30日', value: '07'},
                {label: '全部', value: 'all'}
            ],
            searchTime: [
                new Date().format('yyyy-MM-dd'),
                new Date().format('yyyy-MM-dd')
            ],
            actNum: '1',
            shareCnts: {
                shareFriendCnt: 0, 
                shareCriCnt: 0
            },
            viewCnts: {
                viewFriendCnt: 0, 
                viewCriCnt: 0
            },
            viewNums: {
                viewFriendCnt: 0, 
                viewCriCnt: 0
            },
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
            qaList: [
                {
                    ask: '本页统计数据的内容有哪些？',
                    answer: '本人分享的文章，视频'
                },
                {
                    ask: '当日有看我人数/次数，但没有分享次数或分享内容？',
                    answer: '分享的时间是昨天或更久之前'
                },
                {
                    ask: '当日有分享次数，但没有分享内容？',
                    answer: '分享内容因违规等原因被删除了'
                },
                {
                    ask: '分享的内容，看我人数是0，看我次数却是大于0？',
                    answer: '当不是会员的时候，分享的内容只记录看我次数，不能记录看我人数'
                },
                {
                    ask: '当日分享内容的看我人数/次数，比顶部数据看板的统计数多？',
                    answer: '顶部统计只是展示当天数据，而分享内容的看我人数/次数是每天的合计'
                },
            ]
        }
    },
    computed: {
        chatNum() {
            return [
                this.shareCnts.shareFriendCnt,
                this.viewCnts.viewFriendCnt,
                this.viewNums.viewFriendCnt,
            ][this.actNum - 1]
        },
        timelineNum() {
            return [
                this.shareCnts.shareCriCnt,
                this.viewCnts.viewCriCnt,
                this.viewNums.viewCriCnt,
            ][this.actNum - 1]
        }
    },
    onLoad(options) {
        this.actTimeTab = options.actTimeTab || '01'
        this.userId = options.userId || ''
        this.teamId = options.teamId || ''
        this.chooseTimeTab(this.actTimeTab)
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        chooseTimeTab(e) {
            this.$nextTick(() => {
                this.actTimeTab = e
                if(e == 'all') {
                    this.searchTime = []
                } else {
                    this.searchTime = this.$refs.fastDatePicker.getFormatDate(e)
                }
                this.onRefresh()
                this.getTotal()
            })
        },
        getTotal() {
            getShareViewerTotal({
                startTime: this.searchTime[0] ? this.searchTime[0] + ' 00:00:00' : void 0,
                endTime: this.searchTime[1] ? this.searchTime[1] + ' 23:59:59' : void 0,
                viewerId: this.userId,
                teamId: this.teamId
            }).then(res => {
                this.shareCnts = res.data.shareCnts
                this.viewCnts = res.data.viewCnts
                this.viewNums = res.data.viewNums
            })
        },
        getList(complete) {
            getViewerDynamicHis({
                viewTypeStrs: '3,4', //1,查看文章,2点赞,3分享群聊,4分享朋友圈
                startTime: this.searchTime[0] ? this.searchTime[0] + ' 00:00:00' : void 0,
                endTime: this.searchTime[1] ? this.searchTime[1] + ' 23:59:59' : void 0,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
                viewerId: this.userId,
                teamId: this.teamId
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        QandA() {
            this.$refs.qandAPopup.open()
        }
    }
}
</script>
<style lang="less" scoped>
.day_picker{
    width: 100%;
    height: 80rpx;
    background: #fff;
    padding-top: 20rpx;
    .date{
        flex: 1;
        p{
            height: 100%;
            line-height: 60rpx;
            padding: 0 20rpx;
            font-size: 32rpx;
            color: #999;
            &.active{
                font-weight: 700;
                color: #333;
                position: relative;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: -10rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 30%;
                    height: 10rpx;
                    background: @mainColor;
                }
            }
        }
    }

}
.num_box{
    width: 100%;
    background: #fff;
    padding: 20rpx 50rpx;
    .align(h-space-around);
    .item{
        width: 200rpx;
        height: 180rpx;
        .align(center, column);
        image{
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 10rpx;
            .overflow;
        }
        span{
            width: 100%;
            font-size: 26rpx;
            margin-bottom: 10rpx;
            color: #666;
            text-align: center;
        }
        p{
            color: #007aff;
            font-size: 42rpx;
            font-weight: bold;
            line-height: 42rpx;
        }
    }
}
.detail{
    background: #fff;
    height: 200rpx;
    .detail_box{
        width: 660rpx;
        height: 160rpx;
        background: #f3f3f3;
        margin: 0 auto;
        border-radius: 20rpx;
        position: relative;
        p{
            font-size: 46rpx;
            line-height: 50rpx;
            font-weight: bold;
            margin-top: 10rpx;
        }
    }
    .triangle {
        width: 0;
        height: 0;
        position: absolute;
        top: -20rpx;
        border-bottom: 20rpx solid #f3f3f3;
        border-left: 20rpx solid transparent;
        border-right: 20rpx solid transparent;
        &.triangle_1{
            left: 90rpx;
        }
        &.triangle_2{
            left: 310rpx;
        }
        &.triangle_3{
            left: 530rpx;
        }
    }
}

.share_list{
    background: #fff;
    margin-top: 20rpx;
    padding-bottom: 100rpx;
    .title{
        height: 90rpx;
        line-height: 90rpx;
        padding: 0 30rpx;
        font-size: 34rpx;
        font-weight: bold;
        position: relative;
        &::before{
            content: "";
            position: absolute;
            width: 8rpx;
            height: 30rpx;
            top: 30rpx;
            left: 0;
            background: @mainColor;
        }
    }
    .list{
        .item{
            width: 100%;
            padding: 20rpx 30rpx;
            border-bottom: 1px solid #e5e5e5;
            .top{
                display: flex;
                .art_title {
                    flex: 1;
                    height: 120rpx;
                    font-size: 36rpx;
                    line-height: 60rpx;
                    .overflow(2);
                }
                .img{
                    width: 160rpx;
                    height: 120rpx;
                    image{
                        width: 100%;
                        height: 100%;
                        border-radius: 15rpx;
                    }
                }
            }
            .bottom {
                padding: 30rpx 0 10rpx;
                .align(v-center);
                p{
                    flex: 1;
                    color: #999;
                }
                span{
                    width: 160rpx;
                    justify-content: flex-end;
                    font-size: 26rpx;
                    padding-right: 20rpx;
                    color: #576580;
                    .align(v-center);
                    i{
                        font-size: 24rpx;
                    }
                }
            }

        }
    }
}

.q_and_a{
    width: 100%;
    height: 70vh;
    background: #f3f3f3;
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    .title{
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 40rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
    }
    .qa_list{
        flex: 1;
        height: 1px;
        overflow: auto;
        .qa_item{
            width: 100%;
            background: #fff;
            border-radius: 15rpx;
            padding: 20rpx 20rpx 20rpx 70rpx;
            position: relative;
            margin-bottom: 25rpx;
            span{
                font-size: 26rpx;
                height: 40rpx;
                width: 40rpx;
                border-radius: 0 6rpx 15rpx 0;
                background: #007aff;
                color: #fff;
                position: absolute;
                left: 20rpx;
                top: 24rpx;
                padding-right: 5rpx;
                .align(center);
            }
            >div{
                width: 100%;
            }
            .ask{
                font-size: 34rpx;
                font-weight: bold;
                margin-bottom: 20rpx;
            }

        }
    }
    

}
</style>